<script>
export default {
  name: 'Tab',
  data(){
    return{
    }
  },
  mounted(){
    this.$parent.panes.push(this);
  },
  computed:{
    active(){
      return this.$parent.value  === this.index
    }
  },
  props:{
    label:{
      type:String,
      default:'tab1'
    },
    index:{
      type:[String,Number],
      required:true
    }
  },
  methods:{
    handlerClick(event){
      this.$parent.onChange(this.index)
    }
  },
  render(){
    let tab = this.$slots.label || this.label;
    let className = {
      tab:true,
      active:this.active
    }
    return(
      <li class={className} onClick={this.handlerClick}>
        { tab }
      </li>
    )
  }
}
</script>

<style scoped>
.tab{
  text-align: center;
  flex: 1;
  list-style: none;
  line-height: 40px;
  position: relative;
  cursor: pointer;
  background-color: #fff;
  font-size: 0.3rem;
  margin-top: 0.3rem;
}
.tab.active{
  color: #56BE99;
}
.tab.last-child{
  margin-right: 0;
}
</style>
